<template>
  <div>
    <h3>{{ firstName }}</h3>
    <h3>{{ lastName }}</h3>
    <h3>{{ Name1 }}</h3>
    <h3>{{ Name2 }}</h3>
    <button @click="Name2 = 'Guo jiahui'">点击改名字</button>
    <hr />
    <Hand />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from "vue";

export default defineComponent({
  name: "App",
});
</script>

<script setup lang="ts">
import Hand from "./components/fools/index.vue";
const firstName = ref('Li')
const lastName = ref('shaoyuan')
const Name1 = computed(()=>{
  return firstName.value + ' ' + lastName.value
})
const Name2 = computed({
  get(){
    return firstName.value + ' ' + lastName.value
  }, 
  set(value){
    const [first,last] = value.split(' ');
    firstName.value = first;
    lastName.value = last;
  }
})

</script>

<style scoped></style>
